<!--/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-16 15:58
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div class="x-render-input-button-container">
    <template v-for="(item,index) in currentValue">
      <div class="x-render-input-button-column-group" v-bind:style="groupStyle" v-if="isColumn">
        <a-input
          v-for="(i,j) in keys"
          :key="index + '-' + i + '-input'"
          :value="item[keys[j]]"
          v-bind="attrs"
          :placeholder="placeholder[j]"
          @change="changeHandler($event,index,i)"
        >
          <!--    <extend-slot v-for="(render, key) of slots" v-slot:[key] :key="key" :data="slotData" :render="render"/>-->
        </a-input>
        <a-button v-if="index === currentValue.length - 1" :key="index + '-button-plus'" type="primary"
                  shape="circle" icon="plus" size="small" @click="plusHandler"/>
        <a-button v-if="index !== currentValue.length - 1" :key="index + '-button-minus'" type="danger"
                  shape="circle" icon="minus" size="small" @click="minusHandler(index)"/>
      </div>

      <div class="x-render-input-button-row-group" v-bind:style="groupStyle" v-if="isRow">
        <template v-for="(i,j) in keys">

          <template v-if="j === keys.length - 1">
            <div v-bind:style="itemStyle" class="x-render-input-button-row-item">
              <a-input
                :key="index + '-' + i + '-input'"
                :value="item[keys[j]]"
                v-bind="attrs"
                :placeholder="placeholder[j]"
                @change="changeHandler($event,index,i)"
              >
                <!--    <extend-slot v-for="(render, key) of slots" v-slot:[key] :key="key" :data="slotData" :render="render"/>-->
              </a-input>
              <a-button v-if="index === currentValue.length - 1" :key="index + '-button-plus'" type="primary"
                        shape="circle" icon="plus" size="small" @click="plusHandler"/>
              <a-button v-if="index !== currentValue.length - 1" :key="index + '-button-minus'" type="danger"
                        shape="circle" icon="minus" size="small" @click="minusHandler(index)"/>
            </div>
          </template>
          <template v-else>
            <a-input
              :key="index + '-' + i + '-input'"
              :value="item[keys[j]]"
              v-bind="attrs"
              :placeholder="placeholder[j]"
              @change="changeHandler($event,index,i)"
            >
              <!--    <extend-slot v-for="(render, key) of slots" v-slot:[key] :key="key" :data="slotData" :render="render"/>-->
            </a-input>
          </template>
        </template>
      </div>
      <!--分隔线-->
      <a-divider dashed v-if="showDivider && isRow && index !== currentValue.length - 1"></a-divider>
    </template>
  </div>
</template>

<script>
import {COMPONENT_TYPE, CUSTOM_EVENT_TYPE} from '../../constants'
import ComponentMixin from '../../XRenderMixins/XRenderComponentMixin'
import {cloneDeep} from 'lodash'

export default {
  name: COMPONENT_TYPE.INPUT_BUTTON,
  mixins: [ComponentMixin],
  props: {
    value: {
      type: [String, Array]
    }
  },
  computed: {
    showDivider: {
      get() {
        const {attrs} = this
        return !!attrs.showDivider
      }
    },
    // 是否为行
    isRow: {
      get() {
        const {attrs} = this
        return attrs.grid === 'row'
      }
    },
    // 否则为列
    isColumn: {
      get() {
        const {isRow} = this
        return !isRow
      }
    },
    groupStyle: {
      get() {
        const {isRow, count} = this
        // grid-template-columns: calc( 100% - 8px - 30px ) 30px ;
        return isRow ? {} : {
          'grid-template-columns': count === 1 ?
            `calc( 100% - 8px - 30px ) 30px ` :
            `repeat( ${count}, calc( ( 100% - ${count + 1} * 8px - 30px ) / ${count} ) ) 30px`
        }
      }
    },
    itemStyle: {
      get() {
        const {isRow} = this
        return isRow ? {
          'grid-template-columns': 'calc(100% - 38px) 30px'
        } : {}
      }
    },
    keys: {
      get() {
        const {attrs, count} = this
        const {keys} = attrs
        if (!keys) {
          const arr = []
          // 填充数据
          for (let i = 0; i < count; i++) {
            arr.push('key' + i)
          }
          return arr
        }
        const split = keys.split(',')
        if (split.length === count) {
          return split
        }
        if (split.length < count) {
          const arr = [...split]
          for (let i = split.length; i < count; i++) {
            arr.push('key' + i)
          }
          return arr
        }
        if (split.length > count) {
          split.splice(count, split.length - count)
          return split
        }
        return ['key']
      }
    },
    placeholder: {
      get() {
        const {attrs, count} = this
        const {placeholders} = attrs
        if (!placeholders) {
          const arr = []
          // 填充数据
          for (let i = 0; i < count; i++) {
            arr.push('请输入')
          }
          return arr
        }
        const split = placeholders.split(',')
        if (split.length === count) {
          return split
        }
        if (split.length < count) {
          const arr = [...split]
          for (let i = split.length; i < count; i++) {
            arr.push('请输入')
          }
          return arr
        }
        if (split.length > count) {
          split.splice(count, split.length - count)
          return split
        }
        return ['请输入']
      }
    },
    count: {
      get() {
        const {attrs} = this
        return attrs.count || 1
      }
    },
    currentValue: {
      get() {
        const {value} = this
        if (!value) {
          return [{}]
        }
        if (value instanceof Array) {
          return value || []
        }
        return (new Function('return ' + value))()
      }
    }
  },
  methods: {
    changeHandler(event, index, key) {
      const {formItem, attrs, currentValue} = this
      const arr = cloneDeep(currentValue)
      const targetValue = event.target.value
      const obj = arr[index]
      obj[key] = targetValue
      arr.splice(index, 1, obj)
      this.$emit(CUSTOM_EVENT_TYPE.CHANGE, {
        type: COMPONENT_TYPE.INPUT,
        prop: formItem ? formItem.prop : '',
        value: arr,
        attrs,
        formItem
      })
    },
    plusHandler() {
      const {formItem, attrs, currentValue, keys} = this
      const arr = cloneDeep(currentValue)
      // 初始值
      const obj = {}
      for (const key of keys) {
        obj[key] = ''
      }
      arr.push(obj)
      // 触发事件
      this.$emit(CUSTOM_EVENT_TYPE.CHANGE, {
        type: COMPONENT_TYPE.INPUT,
        prop: formItem ? formItem.prop : '',
        value: arr,
        attrs,
        formItem
      })
    },
    minusHandler(index) {
      const {formItem, attrs, currentValue} = this
      const arr = cloneDeep(currentValue)
      arr.splice(index, 1)
      this.$emit(CUSTOM_EVENT_TYPE.CHANGE, {
        type: COMPONENT_TYPE.INPUT,
        prop: formItem ? formItem.prop : '',
        value: arr,
        attrs,
        formItem
      })
    }
  }
}
</script>

<style scoped lang="css">
.x-render-input-button-container {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.x-render-input-button-column-group {
  width: 100%;
  display: grid;
  grid-column-gap: 8px;
  place-items: center;
  margin: 4px 0;
}

.x-render-input-button-row-group {
  width: 100%;
  display: grid;
  grid-row-gap: 8px;
  place-items: center;
  margin: 4px 0;
}

.x-render-input-button-row-item {
  width: 100%;
  display: grid;
  grid-column-gap: 8px;
  place-items: center;
}

/deep/ .ant-divider-horizontal {
  margin: 16px 0 !important;
}
</style>
